<template>
  <div class="background">
    <div class="register-container">
      <h1>注册</h1>
      <el-form ref="registerForm" :model="registerForm" :rules="rules" class="form">
        <div class="form-row">
          <el-form-item label="用户名" prop="userName">
            <el-input
                class="input"
                v-model="registerForm.userName"
                ref="userName"
                placeholder="请输入用户名"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickName">
            <el-input
                class="input"
                v-model="registerForm.nickName"
                ref="nickName"
                placeholder="请输入昵称"
                autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="密码" prop="password">
            <el-input
                class="input"
                type="password"
                v-model="registerForm.password"
                ref="password"
                placeholder="请输入密码"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
                class="input"
                type="password"
                v-model="registerForm.confirmPassword"
                ref="confirmPassword"
                placeholder="请确认密码"
                autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="邮箱" prop="email">
            <el-input
                class="input"
                v-model="registerForm.email"
                ref="email"
                placeholder="请输入邮箱"
                autocomplete="off"
            ></el-input>
            <button class="button wide-button" :disabled="isSending" @click="sendVerificationCode">
              {{ buttonLabel }}
            </button>
          </el-form-item>
          <el-form-item label="验证码" prop="verificationCode">
            <el-input
                class="input"
                v-model="registerForm.verificationCode"
                ref="verificationCode"
                placeholder="请输入验证码"
                autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="用户类型" prop="userType">
            <el-select
                v-model="registerForm.userType"
                placeholder="请选择用户类型"
                class="input"
                @change="handleUserTypeChange"
            >
              <el-option label="普通成员" value="2"></el-option>
              <el-option label="组长" value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row" v-if="registerForm.userType === '2'">
          <el-form-item label="职务" prop="role">
            <el-select
                v-model="registerForm.role"
                placeholder="请选择职务"
                class="input"
            >
              <el-option label="前端" value="前端"></el-option>
              <el-option label="后端" value="后端"></el-option>
              <el-option label="运维" value="运维"></el-option>
              <el-option label="测试" value="测试"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="button-group">
          <button class="button" @click="register">确认</button>
          <router-link to="/Login">
            <button class="button">取消</button>
          </router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "RegisterView",
  data() {
    return {
      registerForm: {
        userName: "",
        password: "",
        confirmPassword: "",
        nickName: "",
        email: "",
        verificationCode: "",
        userType: "",
        role: "" // 添加 role 字段
      },
      rules: {
        userName: [{ required: true, message: "用户名不能为空" }],
        password: [{ required: true, message: "密码不能为空" }],
        confirmPassword: [{ required: true, message: "确认密码不能为空" }],
        nickName: [{ required: true, message: "昵称不能为空" }],
        email: [
          { required: true, message: "邮箱不能为空" },
          { type: 'email', message: "请输入有效的邮箱地址" }
        ],
        verificationCode: [{ required: true, message: "验证码不能为空" }],
        userType: [{ required: true, message: "请选择用户类型" }],
        role: [{ required: true, message: "请选择职务", trigger: 'change' }]
      },
      isSending: false,
      countdown: 0
    };
  },
  computed: {
    buttonLabel() {
      return this.isSending ? `${this.countdown}秒后重新发送` : "发送验证码";
    }
  },
  methods: {
    handleUserTypeChange(value) {
      if (value !== '2') {
        this.registerForm.role = "";
      }
    },
    sendVerificationCode() {
      if (this.registerForm.email.trim() === "") {
        this.$message.error("请输入邮箱");
        return;
      }

      axios.post('http://localhost:8095/user/sendVerificationCode', { email: this.registerForm.email })
          .then((response) => {
            if (response.data.code === 200) {
              this.$message.success("验证码已发送到您的邮箱");
              this.startCountdown();
            } else {
              this.$message.error("发送验证码失败");
            }
          })
          .catch((error) => {
            console.error(error);
            this.$message.error("发送验证码失败");
          });
    },
    startCountdown() {
      this.isSending = true;
      this.countdown = 60;
      let timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.isSending = false;
        }
      }, 1000);
    },
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (this.registerForm.password !== this.registerForm.confirmPassword) {
            this.$message.error("密码和确认密码不一致");
            return;
          }
          axios.post('http://localhost:8095/user/register', this.registerForm)
              .then((response) => {
                if (response.data.code === 200) {
                  this.$message.success("注册成功");
                  alert("注册成功");
                  this.$router.push({ name: 'Login' });
                } else {
                  this.$message.error("注册失败")
                  alert("注册失败，用户名已存在或其他错误");
                }
              })
              .catch((error) => {
                console.log(error);
              });
        }
      });
    }
  }
};
</script>

<style scoped>
.background {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(232, 232, 254);
  padding: 20px; /* Added padding for better spacing */
}

.register-container {
  width: 100%;
  max-width: 800px; /* Set max-width to limit the width */
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.el-form-item {
  flex: 1;
  margin-right: 20px;
}

.el-form-item:last-child {
  margin-right: 0;
}

.input {
  width: 100%;
}

.button {
  height: 35px;
  margin: 10px;
  background-color: rgb(2, 167, 240);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:disabled {
  background-color: rgb(150, 150, 150);
  cursor: not-allowed;
}

.button:hover:enabled {
  background-color: rgb(1, 120, 180);
}

.wide-button {
  width: 150px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

@media (max-width: 768px) {
  .register-container {
    padding: 15px;
  }

  .form-row {
    flex-direction: column;
  }

  .button-group {
    flex-direction: column;
    align-items: center;
  }

  .button-group .button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
